<template>
	<view class="box p-3 bg-light w-100">
		<tabsTop tabName="储值卡适用商品"></tabsTop>
		<!-- 适用商品 -->
		<view v-for="(item,i) in Goods" :key="i" class="goods mt-3 bg-white flex justify-between align-center container box-sizing">
			<view class="left" style="overflow: hidden;">
				<image style="height: 100%;" class="w-100" :src="Domain_IMG + item.Picture_URL" mode=""></image>
			</view>
			<view class="right p-2 flex justify-around flex-column">
				<view class="text-ellipsis">{{item.Article_Name}}</view>
				<view class="jia_ge"> <text>销售价:</text> <text class="text-danger ">￥{{item.Sales_Unit_Price}}</text>
					<text style="text-decoration: line-through;font-size: 24rpx;" class="jg_false"></text></view>
				<view><text>剩余数量:</text> <text>{{item.Stock_Remain}}件</text></view>
			</view>
		</view>
		<view class="text-center py-2">
			<text class="font-small text-muted">{{BottomText}}</text>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	import tabsTop from "@/components/tabs/tabs-top.vue";
	import {
		WXPrepaymentCardID,
		WXPrepaymentCardArticle,
	} from '@/api/group.js'
	export default {
		components: { //轮播图组件
			tabsTop,
		},
		data() {
			return {
				form: {
					Prepayment_Card_Scheme_SerialNumber: '',
					Enterprise_Info_SerialNumber: app.globalData.Enterprise_Info_SerialNumber,
					App_ID: app.globalData.App_ID,
					page: 1,
					limit: 5
				},
				Domain_IMG: app.globalData.Domain_IMG,
				Goods:[],
				BottomText:'下拉加载更多',
				timer:null,
			};
		},
		onLoad(e) {
			this.form.Prepayment_Card_Scheme_SerialNumber = e.Prepayment_Card_Scheme_SerialNumber
			this.getCardByGoods(this.form)
		},
		onReachBottom() {
			if(this.BottomText!='暂无更多适用商品'){
				this.form.page++
				this.thorw()
			}
		},
		methods: {
			async getCardByGoods(data) {
				uni.showLoading({
					title:'加载中...'
				})
				this.BottomText = '加载中...'
				const res = await WXPrepaymentCardArticle(data)
				console.log(res)
				uni.hideLoading()
				if (res.Status == 'success') {
					this.Goods.push(...res.tableData)
					this.total = Number(res.limit)
					this.timer = null
					clearInterval(this.timer)
					if(this.Goods.length==this.total){
						this.BottomText = '暂无更多适用商品'
					}else{
						this.BottomText = '下拉加载更多'
					}
				}
			},
			thorw(secend=200){
				this.timer = null
				clearInterval(this.timer)
				this.timer = setTimeout(()=>{
					this.getCardByGoods(this.form)
				},secend)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		box-sizing: border-box;
		.goods {
			width: 100%;
			// height: 180rpx;
			border-radius: 20rpx;
			// display: flex;
			// justify-content: space-between;
			// align-items: center;
			// padding: 0 20rpx;
			// box-sizing: border-box;

			.left {
				width: 180rpx;
				height: 180rpx;
				border: 1px solid #000;
				border-radius: 20rpx;
			}

			.right {
				flex: 1;
				box-sizing: border-box;
				// display: flex;
				// justify-content: space-around;
				// flex-direction: column;
				height: 100%;
				font-size: 30rpx;
				view {
					margin: 20rpx 0 0 0;
				}

				.jia_ge {
					.jg_false {
						display: inline-block;
						margin: 0 0 0 10rpx;
					}
				}
			}
		}
	}
</style>